<template>
  <div class="page">
    <div>
      生成方式：
      <el-button type="primary" size="default" @click="exportFile">生成xlsx</el-button>
      <el-button type="primary" size="default" @click="exportFile2">生成xlsx2</el-button>
      <el-button type="primary" size="default" @click="exportFile3">数组-生成xlsx3</el-button>
      <el-button type="primary" size="default" @click="exportFile4">json-生成xlsx4</el-button>
    </div>
    <div>
      生成功能：
      <el-button type="primary" size="default" @click="exportFile2">数据格式化</el-button>
      <el-button type="primary" size="default" @click="exportFile5">合并单元格</el-button>
      <el-button type="primary" size="default" @click="exportFile6">函数使用</el-button>
    </div>
  </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
  data () {
    return {
      data: [
        'SheetJS'.split(''),
        [1, 2, 3, 4, 5, 6, 7],
        [2, 3, 4, 5, 6, 7, 8]
      ]
    }
  },
  methods: {
    exportFile (evt) {
      const wb = {
        SheetNames: ['Sheet1'],
        Sheets: {
          Sheet1: {
            '!ref': 'A1:C1',
            A1: { t: 'n', v: 10000 }, // <-- General format
            B1: { t: 'n', v: 10000, z: '0%' }, // <-- Builtin format
            C1: { t: 'n', v: 10000, z: '"T"\ #0.00' } // <-- Custom format
          }
        }
      }
      XLSX.writeFile(wb, 'sheetjs.xlsx')
    },
    exportFile2 (evt) {
      /* Initial row */
      var ws = {
        '!ref': 'A1:C1',
        A1: { t: 'n', v: 10000 }, // <-- General format
        B1: { t: 'n', v: 10000, z: '0%' }, // <-- Builtin format
        C1: { t: 'n', v: 10000, z: '"T"\ #0.00' } // <-- Custom format
      }
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, ws, 'SheetJS')
      /* generate file and send to client */
      XLSX.writeFile(wb, 'sheetjs.xlsx')
    },
    exportFile3 (evt) {
      /* Initial row */
      var ws = XLSX.utils.aoa_to_sheet([
        'SheetJS'.split(''),
        [1, 2, 3, 4, 5, 6, 7],
        [2, 3, 4, 5, 6, 7, 8]
      ])
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, ws, 'SheetJS')
      /* generate file and send to client */
      XLSX.writeFile(wb, 'sheetjs.xlsx')
    },
    exportFile4 (evt) {
      /* Initial row */
      var ws = XLSX.utils.json_to_sheet([
        { A: 'S', B: 'h', C: 'e', D: 'e', E: 't', F: 'J', G: 'S' },
        { A: 1, B: 2, C: 3, D: 4, E: 5, F: 6, G: 7 },
        { A: 2, B: 3, C: 4, D: 5, E: 6, F: 7, G: 8 }
      ], { header: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], skipHeader: true })
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, ws, 'SheetJS')
      /* generate file and send to client */
      XLSX.writeFile(wb, 'sheetjs.xlsx')
    },
    exportFile5 (evt) {
      // var ws = XLSX.utils.aoa_to_sheet([
      //   'SheetJS'.split(''),
      //   [1, 2, 3, 4, 5, 6, 7],
      //   [2, 3, 4, 5, 6, 7, 8]
      // ])
      // console.log(ws)
      // if (ws) return

      const wb = {
        SheetNames: ['Sheet1'],
        Sheets: {
          Sheet1: {
            // '!merges': [
            //   {
            //     s: { c: 0, r: 0 },
            //     e: { c: 3, r: 0 },
            //   },
            //   {
            //     s: { c: 0, r: 4 },
            //     e: { c: 3, r: 4 },
            //   },
            // ],
            '!ref': 'A1:D5',
            A1: { t: 'n', v: 10000 },
            A2: { t: 'n', v: 20000 },
            A3: { t: 'n', v: 30000 },
            A4: { t: 'n', v: 40000 },
            A5: { t: 'n', v: 50000 },
            B1: { t: 'n', v: 10000 },
            B2: { t: 'n', v: 20000 },
            B3: { t: 'n', v: 30000 },
            B4: { t: 'n', v: 40000 },
            B5: { t: 'n', v: 50000 },
            C1: { t: 'n', v: 10000 },
            C2: { t: 'n', v: 20000 },
            C3: { t: 'n', v: 30000 },
            C4: { t: 'n', v: 40000 },
            C5: { t: 'n', v: 50000 },
            D1: { t: 'n', v: 10000, fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: '#ff0000' } } },
            D2: { t: 'n', v: 20000 },
            D3: { t: 'n', v: 40000, f: 'D2*2' },
            D4: { t: 's', v: '中国人', r: '<div style="color:red">4444</div>' },
            D5: { t: 'r', v: '<div style="color:red">4444</div>' },
          }
        }
      }
      // { bookType: 'xlsx', type: 'binary', cellStyles: true, sheet: '示例' }
      // XLSX.writeFile(wb, 'sheetjs.xlsx')
      XLSX.writeFile(wb, 'sheetjs.xlsx', { bookType: 'xlsx', type: 'binary', cellStyles: true })
    },
    exportFile6 (evt) {
      const wb = {
        SheetNames: ['Sheet1'],
        Sheets: {
          Sheet1: {
            '!ref': 'A1:D5',
            A1: { t: 'n', v: 10000 },
            A2: { t: 'n', v: 20000 },
            A3: { t: 'n', v: 30000 },
            A4: { t: 'n', v: 40000 },
            A5: { t: 'n', v: 50000 },
            B1: { t: 'n', v: 10000 },
            B2: { t: 'n', v: 20000 },
            B3: { t: 'n', v: 30000 },
            B4: { t: 'n', v: 40000 },
            B5: { t: 'n', v: 50000 },
            C1: { t: 'n', v: 10000 },
            C2: { t: 'n', v: 20000 },
            C3: { t: 'n', v: 30000 },
            C4: { t: 'n', v: 40000 },
            C5: { t: 'n', v: 50000 },
            D1: { t: 'n', v: 10000 },
            D2: { t: 'n', v: 20000 },
            D3: { t: 'n', v: 30000 },
            D4: { t: 'n', v: 40000 },
            D5: { t: 'n', v: 50000 },
          },
          '!merges': [
            {
              s: { c: 0, r: 0 },
              e: { c: 0, r: 4 },
            },
            {
              s: { c: 0, r: 4 },
              e: { c: 3, r: 4 },
            },
          ]
        }
      }
      XLSX.writeFile(wb, 'sheetjs.xlsx')
    },
  }
}
</script>

<style lang="scss" scoped>
.page{
  padding: 30px;
}
</style>
